/*
  学习目标：掌握props的两个特点
  1. 可以传递任意数据类型
    1.1 string  number boolean undefined  array object
    1.2 💥函数、💥JSX
  2. 单项数据流 - props是只读的 
  🔔 React中的单项数据流是更严格单项数据流，无法通过引用地址绕过
 
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Hello msg="hello React" list={[1, 2, 3]}></Hello>
      </div>
    );
  }
}

class Hello extends Component {
  handleClick = () => {
    // ❌ 无效，也不会引起界面更新
    this.props.list.push(4);
    // ❌ 直接报错
    this.props.msg = '456';
  };
  render() {
    const { list, msg } = this.props;
    return (
      <div>
        <h1>{msg}</h1>
        <h2>{list}</h2>

        <button onClick={this.handleClick}>点我修改list</button>
      </div>
    );
  }
}
